<template>
	<view class="collect">
		<template v-if="state">
		<uni-list :border="false" v-if="data.length > 0">
			<uni-swipe-action class="uni-action" ref="action">
				<uni-swipe-action-item :threshold="20" :right-options="options"
					@click="delClick(item.id)" v-for="item in data" :key="item.cleaner_id">
					<uni-list-item :border="false">
						<!-- 自定义 body -->
						<view slot="body" class="slot-box">
								<image class="slot-main-image" :src="item.avatar[0]" mode=""></image>
							<view class="slot-main-con">
								<view class="main-con name">
									<text>{{item.real_name?item.real_name:item.nickname}}</text>
								</view>
								<view class="main-con score">
									<view class="dis-corder"><image class="img-18" :src="imgUrl6" mode="aspectFit" @click="scoreClick(item.cleaner_id)" /><text>{{item.evaluate_num || '0'}}</text></view>
									<view class="dis-corder"><image class="img-14" :src="imgUrl2" mode="aspectFit" /><text style="color: #FEAD1D;">{{item.score || '0'}}</text></view>
									<text>已服务 {{item.services_num || '0'}}次</text>
								</view>
							</view>
						</view>
					</uni-list-item>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</uni-list>
		<uni-load-more v-if="data.length > 0" iconType="auto" :status="status" @clickLoadMore="clickLoadMore" :content-text="contentText" />
		</template>
		<view style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;height:calc(100vh - 40rpx);" v-else>
			<image :src="imgUrl" style="width: 350rpx;height:291rpx;margin-bottom: 36rpx;"></image>
			<text style="font-size: 32rpx;font-weight: 500;color: #777777;margin-bottom: 120rpx;">暂无数据!</text>
		</view>	
		<uni-popup type="bottom" ref="popup" @change="change" @maskClick="onPopup" :mask-click="false">
			<view class="popup">
				<view class="info-card">
					<uni-card :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'20rpx'" :padding="0">
						<view class="card-list">
							<view class="c-l-top">
								<image class="c-l-t-img" :src="detailsData.avatar[0]" mode=""></image>
								<view class="c-l-t-con">
									<view class="c-l-t-title">
										<view class="">
											<text class="c-l-t-name">{{detailsData.real_name?detailsData.real_name:detailsData.nickname}}</text>
											<text class="c-l-t-name" style="margin-left: 50rpx;">{{detailsData.phone || ''}}</text>
										</view>
										<view class="c-l-t-info">
											<image class="c-l-t-ioc" :src="imgUrl2" mode=""></image>
											<text class="c-l-t-text">{{detailsData.score || '0'}}</text>
										</view>
									</view>
									<text class="c-l-e-text">{{detailsData.cleaner_des || ''}}</text>
								</view>
							</view>
							<view class="c-l-end">
								<view class="c-l-e-kp">
									<image class="img-14" :src="imgUrl5" mode="aspectFit"></image>
									<text class="c-l-e-text">实名认证</text>
								</view>
								<view class="c-l-e-kp">
									<image class="img-14" :src="imgUrl4" mode="aspectFit"></image>
									<text class="c-l-e-text">已培训</text>
								</view>
								<view class="c-l-e-kp">
									<image class="img-14" :src="imgUrl3" mode="aspectFit"></image>
									<text class="c-l-e-text">已考试</text>
								</view>
							</view>
						</view>
					</uni-card>
				</view>
				<view class="list-card">
					<template v-if="commentsData.length != 0">
					<uni-card :is-shadow="false" :border="false" :margin="'0 20rpx 20rpx'" :spacing="'0 20rpx'" :padding="0">
							<uni-list>
								<uni-list-item :key="index" v-for="(i,index) in commentsData">
									<view slot="body" >
										<view class="l-c-top">
											<image class="l-c-img" :src="i.logo[0]" mode=""></image>
											<view class="l-c-title">
												<view class="l-c-name">
													<text class="l-c-text">{{i.hotel_name || ''}}</text>
													<text class="l-c-date">{{i.create_time || ''}}</text>
												</view>
												<view class="l-c-iocn">
													<image class="l-c-i-img" :src="imgUrl2" mode="aspectFit" :key="indexa" v-for="(j,indexa) in i.star"></image>
												</view>
											</view>
										</view>
										<view class="l-c-con">
											<text class="l-c-c-text">{{i.content || ''}}</text>
										</view>
										<view class="l-c-end">
											<uni-tag :circle="true" :text="s" :key="indexs" v-for="(s,indexs) in i.label"></uni-tag>
										</view>
									</view>
								</uni-list-item>
							</uni-list>
					<uni-load-more iconType="auto" :status="status1" @clickLoadMore="clickLoadMore1" :content-text="contentText" />
					</uni-card>
					</template>
					<view style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;height:100%;" v-else>
						<image :src="imgUrl" style="width: 350rpx;height:291rpx;margin-bottom: 36rpx;"></image>
						<text style="font-size: 32rpx;font-weight: 500;color: #777777;margin-bottom: 120rpx;">暂无数据!</text>
					</view>	
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:`${getApp().globalData.imgScr}jd/dingdankongzhuangtai.png`,
				imgUrl2:`${getApp().globalData.imgScr}jd/xinji.png`,
				imgUrl3:`${getApp().globalData.imgScr}jd/yikaoshi.png`,
				imgUrl4:`${getApp().globalData.imgScr}jd/yipeixun.png`,
				imgUrl5:`${getApp().globalData.imgScr}jd/shimingrenzheng.png`,
				imgUrl6:`${getApp().globalData.imgScr}jd/pinglun.png`,
				data:[], // 收藏的保洁数据
				options: [{ // 左滑动 操作按钮数据
					text: '删除',
					style: {
						backgroundColor: '#FF4B4B',
						color: '#ffffff'
					}
				}],
				state:true, // 默认状态
				page:1, // 收藏初始页码
				total:0, // 收藏数据总条数
				status: 'more', // 收藏加载状态
				contentText: { // 加载状态对应的提示语
					contentdown: '点击加载更多数据',
					contentrefresh: '正在加载中...',
					contentnomore: '没有更多数据'
				},
				uid:'', // 点击评论的当前列id
				detailsData:{},// 评论详情数据
				commentsData:[], // 评论数据
				page1:1, // 评论初始页码
				total1:0, // 评论数据总条数
				status1: 'more', // 评论加载状态
			};
		},
		onShow() {
			Object.assign(this.$data, this.$options.data())
			this.getClick(this.page)
		},
		onPullDownRefresh() {
			let _this = this
			// 下拉刷新时触发
		        setTimeout(function () {
					uni.showToast({
						title:"刷新成功",
						icon:"none"
					})
					// 重置 data() 数据
					Object.assign(_this.$data, _this.$options.data())
					_this.getClick()
		            uni.stopPullDownRefresh();
		        }, 1000);
		    },
		methods:{
			/**
			 * 删除按钮 触发的事件
			 * @param {Object} id 当前列表数据的id
			 */
			async delClick(id) {
				try{
					let res = await this.$http.post('/index/Hotelpersonal/del_longworker',{id:id})
					// 重置 data() 数据
					Object.assign(this.$data, this.$options.data())
					this.getClick(1,this.page*5)
				}catch(e){
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			},
			/**
			 * 请求数据
			 */
			async getClick(page=1,limit = 10) {
				let _this = this
				try{
					let res = await this.$http.post('/index/Hotelpersonal/longworker',{
						page:page,
						limit:limit
					})
					this.data = [...this.data,...res.data]
					this.state = this.data.length
					this.total = res.total
					if(this.page >= res.last_page) return this.status = 'no-more'
					this.status = 'more'
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			},
			/**
			 * 评论按钮触发事件
			 * @param {Object} data 当前列数据
			 */
			async scoreClick(id) {
				let _this = this
				this.uid = id
				try{
					let res = await this.$http.get('/index/Hotelcleaner/cleanerinfo',{id:id})
					this.detailsData = res
					let rep = await this.$http.get('/index/Hotelcleaner/cleaner_evaluatelist',{
						id:id,
						page:1,
						limit:10
						})
					this.commentsData = rep.data
					this.status1 = this.page1 >= rep.last_page?'no-more':'more'
					// 打开弹出层
					_this.$refs.popup.open()
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
				
			},
			/**
			 * 弹出层状态发生变化触发
			 * @param {Object} e  e={show: true｜false,type:当前模式}
			 */
			change: function(e) {
			},
			/**
			 * 长期工列表加载更多按钮
			 * @param {Object} e 加载更多的状态 
			 */
			async clickLoadMore(e) {
				if(e.detail.status == 'no-more') return this.status = 'no-more'
				this.status = 'loading'
				this.page += 1
				this.getClick(this.page)
			},
			/**
			 * 评论列表加载更多按钮
			 * @param {Object} e 加载更多的状态 
			 */
			async clickLoadMore1(e) {
				if(e.detail.status == 'no-more') return this.status1 = 'no-more'
				this.status1 = 'loading'
				this.page1 += 1
				try{
					let rep = await this.$http.get('/index/Hotelcleaner/cleaner_evaluatelist',{
						id:this.uid,
						page:this.page1,
						limit:10
						})
					this.commentsData = [...this.commentsData,...rep.data]
					this.total1 = rep.total
					if(this.page1 >= rep.last_page) return this.status1 = 'no-more'
					this.status1 = 'more'
				}catch(e){
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			},
			/**
			 * 点击遮罩层触发
			 */
			onPopup:async function() {
				await this.$refs.popup.close()
				this.page1 = 1
				this.status1 = 'more'
				this.total1 = 0
				await uni.showTabBar({
					animation:true
				})
			},
		}
	}
</script>

<style lang="scss">
.collect {
	padding: 20rpx;
	.img-14 {
		width: 28rpx;
		height: 28rpx;
		margin: 8rpx;
	}
	.img-18 {
		width: 32rpx;
		height: 32rpx;
		margin: 8rpx;
	}
	.dis-corder {
		display: flex;
		align-items: center;
	}
	.uni-list {
		border-radius: 20rpx;
		overflow: hidden;
		padding: 0 0 40rpx;
	}
	.uni-list-item__container {
		box-sizing: border-box;
		padding: 40rpx 40rpx 0;
	}
	.slot-box {
		display: flex;
		align-items: center;
		flex: 1;
		.slot-main-image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 20rpx;
			border: 0;
		}
		.slot-main-con {
			box-sizing: border-box;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 150rpx;
			margin-left: 16rpx;
			padding: 14rpx 24rpx;
			
			.main-con {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				color: #000000;
			}
			.name {
				font-size: 28rpx;
				font-weight: 600;
				color: #000000;
			}
			
		}
	}
}
// 弹出层样式
	.popup {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 80vh;
		border-radius: 20rpx 20rpx 0 0;
		overflow: auto;
		background-color: #F5F5F5;
		.uni-card {
			border-radius: 20rpx;
		}
		// 保洁详情信息 卡片
		.info-card {
			.card-list {
				display: flex;
				flex-direction: column;
				.c-l-top {
					display: flex;
					align-items: center;
					.c-l-t-img {
						width: 130rpx;
						height: 130rpx;
						border-radius: 20rpx;
						overflow: hidden;
						border: 0;
						margin-right: 20rpx;
					}
					.c-l-t-con {
						flex: 1;
						display: flex;
						flex-direction: column;
						height: 130rpx;
						.c-l-t-title {
							display: flex;
							justify-content: space-between;
							align-items: center;
							.c-l-t-name {
								font-size: 28rpx;
								font-weight: bold;
								color: #000000;
							}
							.c-l-t-info {
								.c-l-t-ioc {
									width: 30rpx;
									height: 30rpx;
									margin-right: 6rpx;
								}
								.c-l-t-text {
									font-size: 28rpx;
									font-weight: 600;
									color: #FEAD1D;
								}
							}
						}
					}
					.c-l-e-text {
						font-size: 20rpx;
						font-weight: 500;
						line-height: 1.2em;
						color: rgba($color: #000000, $alpha: 0.5);
					}
				}
				.c-l-end {
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					.c-l-e-kp {
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;
						.c-l-e-text {
							font-size: 24rpx;
							font-weight: 500;
							color: rgba($color: #000000, $alpha: 0.5);
							margin-left: 6rpx;
						}
					}
				}
			}
		}
		// 酒店评价信息列表
		.list-card {
			flex: 1;
			.uni-list-item__container {
				padding: 20rpx 0;
			}
			// 标题栏
			.l-c-top {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				.l-c-img {
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
					border-radius: 30rpx;
					overflow: hidden;
				}
				.l-c-title {
					flex: 1;
					height: 60rpx;
					.l-c-name {
						display: flex;
						align-items: center;
						width: 100%;
						.l-c-text {
							font-size: 28rpx;
							font-weight: 500;
							color: #000000;
							margin-right: 50rpx;
						}
						.l-c-date {
							font-size: 24rpx;
							font-weight: 500;
							color: rgba($color: #000000, $alpha: 0.5);
						}
					}
					.l-c-iocn {
						display: flex;
						align-items: center;
						width: 100%;
						.l-c-i-img {
							width: 24rpx;
							height: 24rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
			// 内容栏
			.l-c-con {
				display: flex;
				margin-bottom: 10rpx;
				.l-c-c-text {
					font-size: 20rpx;
					font-weight: 500;
					line-height: 1.2em;
					color: rgba($color: #000000, $alpha: 0.7);
				}
			}
			// 底部标签栏
			.l-c-end {
				margin: 10rpx;
				.uni-tag {
					font-size: 20rpx;
					font-weight: 500;
					background-color: #F7F7F7;
					color: rgba($color: #000000, $alpha: 0.7);
					margin-right: 20rpx;
					border: 0;
				}
			}
		}
	}
</style>
